<template>
	<div>
		<!--		查询-->
		<el-row>
			<el-col :span="24">
				<el-form :inline="true" :model="state.query">
					<el-form-item label="动漫名称">
						<el-input v-model="state.query.title" placeholder="请输入动漫名称" />
					</el-form-item>
					<el-form-item label="动漫类型">
						<el-input v-model="state.query.cateName" placeholder="请输入动漫类型" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="init">查找</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<!--		按钮-->
		<el-row>
			<el-col :span="24">
				<el-button type="primary" :icon="Edit" @click="btn('新增', {})">新增</el-button>
			</el-col>
		</el-row>
		<!--		表单-->
		<el-row>
			<el-col :span="24">
				<el-table :data="state.itemList" :cell-style="{ textAlign: 'center' }"
									:header-cell-style="{ 'text-align': 'center' }">
					<el-table-column align="center" prop="id" label="编号" />
					<el-table-column align="center" prop="title" label="标题" />
					<el-table-column label="简介">
						<template #default="scope"><span class="ellipsis">{{ scope.row.introduction }}</span>
						</template>
					</el-table-column>
					<el-table-column label="封面">
						<template #default="scope">
							<el-image style="width: 100px; height: 100px" :src="scope.row.img" />
						</template>
					</el-table-column>
					<el-table-column prop="cateName" label="分类名称" />
					<el-table-column prop="authorName" label="声优" />
					<el-table-column prop="anotherName" label="别名" />
					<el-table-column align="center" prop="score" label="综合评分" />
					<el-table-column align="center" prop="collectNumber" label="收藏量" />
					<el-table-column align="center" prop="ratingsNumber" label="评分人数" />
					<el-table-column label="操作">
						<template #default="scope">
							<el-button
								link
								type="primary"
								size="small"
								@click.prevent="btn('修改', scope.row)"
							>修改
							</el-button
							>
							<el-button
								link
								type="primary"
								size="small"
								@click.prevent="del(scope.row.id)"
							>删除
							</el-button
							>
						</template>
					</el-table-column>

				</el-table>
				<div class="page">
					<el-pagination
						@current-change="sendValue"
						background
						:page-size="12"
						layout="prev, pager, next"
						:total="state.query.total"
					/>
				</div>
			</el-col>
		</el-row>
	</div>
	<el-dialog
		v-model="state.dialogVisible"
		:title="state.title"
		width="50%"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
	>
		<el-form
			ref="ruleFormRef"
			:rules="rules"
			:model="state.from"
			label-width="auto"
			style="max-width: 800px"
		>
			<el-form-item label="名称" prop="title">
				<el-input v-model="state.from.title" placeholder="请输入动漫名称" />
			</el-form-item>
			<el-form-item label="别名" prop="anotherName">
				<el-input v-model="state.from.anotherName" placeholder="请输入动漫别名" />
			</el-form-item>
			<el-form-item label="声优" prop="authorName">
				<el-input v-model="state.from.authorName" placeholder="请输入动漫声优" />
			</el-form-item>

			<el-form-item label="类型" prop="cateName">
				<el-select v-model="state.from.cateName" multiple placeholder="请选择">
					<el-option v-for="cate in state.cateList" :label="cate.name" :value="cate.name" />
				</el-select>
			</el-form-item>
			<!--			<el-form-item label="标签" prop="tag">-->
			<!--				<el-input v-model="state.from.tag" placeholder="请输入标签" />-->
			<!--				<div class="p1">-->
			<!--					<TEditor v-model="state.from.jobInfo" />-->
			<!--				</div>-->
			<!--			</el-form-item>-->

			<el-form-item label="封面" prop="img">
				<el-upload
					class="avatar-uploader"
					action="http://ordinary.jimostudio.link:26451/api/upload?type=10&projectName=chinaAnimation"
					:show-file-list="false"
					:on-success="handleAvatarSuccess"
				>
					<img
						v-if="state.from.img"
						:src="state.from.img"
						class="avatar"
					/>
					<el-icon v-else class="avatar-uploader-icon">
						<Plus />
					</el-icon>
				</el-upload>
			</el-form-item>

			<el-form-item label="简介" prop="introduction">
				<el-input type="textarea" :rows="4" v-model="state.from.introduction" />
			</el-form-item>

			<el-form-item label="角色" prop="role">
				<el-input v-model="state.from.role" placeholder="请输入动漫角色" />
			</el-form-item>


		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button v-if="state.title === '修改'" @click="update(ruleFormRef)"
				>确定 修改
				</el-button
				>
				<el-button v-else @click="save(ruleFormRef)">确定 新增</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import { Edit } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { ref } from 'vue'

const ruleFormRef = ref<FormInstance>()
import type { FormInstance } from 'element-plus'

const rules = reactive(<any>{
	title: [
		{
			required: true,
			message: '名称不能为空',
			trigger: 'change'
		}
	],
	img: [
		{
			required: true,
			message: '图片不能为空',
			trigger: 'change'
		}
	],
	introduction: [
		{
			required: true,
			message: '简介不能为空',
			trigger: 'change'
		}
	],

	tag: [
		{
			required: true,
			message: '标签不能为空',
			trigger: 'change'
		}
	],
	cateName: [
		{
			required: true,
			message: '分类名称不能为空',
			trigger: 'change'
		}
	]

})
const state = reactive(<any>{
	imgPath: '',
	dialogVisible: false,
	title: '',
	//条件查询
	query: {
		cateName: '',
		title: '',
		page: 1,
		limit: 5,
		total: 0
	},
	itemList: [],
	from: {},
	cateList: []
})
/**
 * 文件上传
 * @param response
 * @param uploadFile
 */
const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
	state.from.img = response.data.path
}

function init() {
	http.get(`/item/page`, {
		params: state.query
	})
		.then((res) => {
			state.itemList = res.data.list
			state.query.total = res.data.total
		})

	http.get('cate?fid=0').then(res => {
		state.cateList = res.data
	})
}

//分页
/**
 * 分页出发函数
 * @param val
 */
const sendValue = (val: number) => {
	state.query.page = val
	init()
}

//预打开按钮
function btn(type: string, data: any) {
	state.dialogVisible = true
	state.from = {}
	state.title = type
	if (type === '修改') {
		state.from = data
		state.from.cateName = state.from.cateName.split(',')
	}

}

//新增
const save = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid) => {
		if (valid) {
			state.from.cateName = state.from.cateName.join(',')
			http.post('item', state.from).then(() => {
				toast.success('新增成功')
				state.dialogVisible = false
				init()
			})
		}
	})
}
//修改
const update = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid) => {
		if (valid) {
			state.from.cateName = state.from.cateName.join(',') //数组转字符串，后台接收需要转回数组格式
			http.put('item/update', state.from).then(() => {
				toast.success('修改成功')
				state.dialogVisible = false
				state.from = {}
				init()
			})
		}
	})
}

//删除
function del(id: number) {
	http.delete(`item/${id}`).then(() => {
		toast.success('删除成功')
		init()
	})
}

init()
</script>
<style scoped>
.ellipsis {
	white-space: nowrap; /* 不换行 */
	overflow: hidden; /* 隐藏超出部分 */
	text-overflow: ellipsis; /* 使用省略号表示溢出文本 */
	width: 200px; /* 设置固定宽度 */
}

.page {
	margin: 20px 0;
	display: flex;
	justify-content: center;
	text-align: center;
}

::v-deep .avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

::v-deep .avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

::v-deep .el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
}
</style>
<route lang="json">
{
"meta": {
"title": "后台",
"layout": "admin"
}
}
</route>
